<template>
  <div>
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="cancel" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="title">修改订阅</div>
      </div>
    </div>

    <div class="sea-tit">车型</div>

    <van-row class="page-block">
      <div class="search-car-box" style="padding-bottom: 0">
        <div class="box-item" v-for="(item,index) in typeArr" :class="{'active':typeVal==item.name}" @click="typeVal=item.name">
          <img class="img" :src="item.img"/>
          <div class="tit">{{item.name}}</div>
        </div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">车牌所在地</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':card_come==1}" @click="card_come=1">本地牌照</div>
        <div class="item-money" :class="{'active':card_come==2}" @click="card_come=2">外地牌照</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">
      <span class="pull-left">车龄</span>
      <span class="pull-left smll">（单位：年）</span>
      <span class="pull-right tit-right" v-if="year_old==0">不限</span>
      <span class="pull-right tit-right" v-if="year_old>0">{{year_old}}年</span>
    </div>
    <van-row class="page-block">
      <van-slider class="search-money-bar" v-model="year_old" :min="0" :max="10"/>

      <div class="search-money-bar-txt">
        <div class="txt-item">不限</div>
        <div class="txt-item">2</div>
        <div class="txt-item">4</div>
        <div class="txt-item">6</div>
        <div class="txt-item">8</div>
        <div class="txt-item">10</div>
      </div>
      <van-divider />
    </van-row>

    <div class="sea-tit">
      <span class="pull-left">行驶里程</span>
      <span class="pull-left smll">（单位：万公里）</span>
      <span class="pull-right tit-right" v-if="go_long==0">不限行驶里程</span>
      <span class="pull-right tit-right" v-if="go_long>0">{{go_long}}万公里</span>
    </div>
    <van-row class="page-block">
      <van-slider class="search-money-bar" v-model="go_long" :min="0" :max="15"/>

      <div class="search-money-bar-txt">
        <div class="txt-item">不限</div>
        <div class="txt-item">3</div>
        <div class="txt-item">6</div>
        <div class="txt-item">9</div>
        <div class="txt-item">12</div>
        <div class="txt-item">15</div>
      </div>
      <van-divider />
    </van-row>

    <div class="sea-tit">
      <span class="pull-left">排量</span>
      <span class="pull-left smll">（单位：升）</span>
      <span class="pull-right tit-right" v-if="row_amount==0">不限排量</span>
      <span class="pull-right tit-right" v-if="row_amount>0">{{row_amount}}升</span>
    </div>
    <van-row class="page-block">
      <van-slider class="search-money-bar" :step="0.5" v-model="row_amount" :min="0" :max="6"/>

      <div class="search-money-bar-txt">
        <div class="txt-item">不限</div>
        <div class="txt-item">1.0</div>
        <div class="txt-item">2.0</div>
        <div class="txt-item">3.0</div>
        <div class="txt-item">4.0</div>
        <div class="txt-item">6.0</div>
      </div>
      <van-divider />
    </van-row>

    <div class="sea-tit">排放标准</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':car_dis==6}" @click="car_dis=6">国六</div>
        <div class="item-money" :class="{'active':car_dis==5}" @click="car_dis=5">国五及以上</div>
        <div class="item-money" :class="{'active':car_dis==4}" @click="car_dis=4">国四及以上</div>
        <div class="item-money" :class="{'active':car_dis==3}" @click="car_dis=3">国三及以上</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">颜色</div>

    <van-row class="page-block">
      <div class="search-car-box" style="padding-bottom: 0">
        <div class="color-item" v-for="(item,index) in colorArr" :class="{'active':color==item}" @click="color=item">
          <i class="ico" :class="index"></i>
          <div class="tit">{{item}}</div>
        </div>



      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">变速箱</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':car_case==1}" @click="car_case=1">手动</div>
        <div class="item-money" :class="{'active':car_case==2}" @click="car_case=2">自动</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">座位数</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':seat_numb==2}" @click="seat_numb=2">2座</div>
        <div class="item-money" :class="{'active':seat_numb==3}" @click="seat_numb=3">3座</div>
        <div class="item-money" :class="{'active':seat_numb==4}" @click="seat_numb=4">4座</div>
        <div class="item-money" :class="{'active':seat_numb==5}" @click="seat_numb=5">5座</div>
        <div class="item-money" :class="{'active':seat_numb==7}" @click="seat_numb=7">7座及以上</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">燃油类型</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':oil_type=='汽油'}" @click="oil_type='汽油'">汽油</div>
        <div class="item-money" :class="{'active':oil_type=='柴油'}" @click="oil_type='柴油'">柴油</div>
        <div class="item-money" :class="{'active':oil_type=='电动'}" @click="oil_type='电动'">电动</div>
        <div class="item-money" :class="{'active':oil_type=='油电混合'}" @click="oil_type='油电混合'">油电混合</div>
        <div class="item-money" :class="{'active':oil_type=='其他'}" @click="oil_type='其他'">其他</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">国别</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':car_country=='德系'}" @click="car_country='德系'">德系</div>
        <div class="item-money" :class="{'active':car_country=='日系'}" @click="car_country='日系'">日系</div>
        <div class="item-money" :class="{'active':car_country=='美系'}" @click="car_country='美系'">美系</div>
        <div class="item-money" :class="{'active':car_country=='法系'}" @click="car_country='法系'">法系</div>
        <div class="item-money" :class="{'active':car_country=='韩系'}" @click="car_country='韩系'">韩系</div>
        <div class="item-money" :class="{'active':car_country=='国产'}" @click="car_country='国产'">国产</div>
        <div class="item-money" :class="{'active':car_country=='其他'}" @click="car_country='其他'">其他</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">亮点配置</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" v-for="(item,index) in labList" @click="chooseLabel(item.id,item)"
             :class="{'active':item.check}">{{item.title}}
        </div>
      </div>
    </van-row>


    <div class="btn-box">
      <van-button type="info" class="btn-primary" @click="edit">修 改</van-button>
    </div>

  </div>

</template>

<script>
  import { Dialog } from 'vant'

  export default {
    name: "user_book_edit",
    components: {},
    data() {
      return {
        year_old: 0,
        go_long: 0,
        row_amount: 0,

        typeVal:'',
        typeArr:[
          {name:'两厢轿车',img:require('@/assets/images/car/lx.svg')},
          {name:'三箱轿车',img:require('@/assets/images/car/sx.svg')},
          {name:'跑车',img:require('@/assets/images/car/pc.svg')},
          {name:'SUV',img:require('@/assets/images/car/suv.svg')},
          {name:'MPV',img:require('@/assets/images/car/mpv.svg')},
          {name:'面包车',img:require('@/assets/images/car/mbc.svg')},
          {name:'皮卡',img:require('@/assets/images/car/pk.svg')}
        ],

        card_come:-1, //车牌所在地
        car_dis:0, //排放标准

        color:"", //颜色
        colorArr:{
          black:'黑色',
          white:'白色',
          sgray:'银灰色',
          gray:'深灰色',
          red:'红色',
          orange:'橙色',
          green:'绿色',
          blue:'蓝色',
          coffee:'咖啡色',
          violet:'紫色',
          xb:'香槟色',
          dc:'多彩色',
          yellow:'黄色',
          other:'其他',
        },

        car_case:-1, //变速箱
        seat_numb:0, //座位数量
        oil_type:"", //燃油类型
        car_country:"", //国别

        //其它配置
        labList:[],
        labArr:[],

        //初始化条件
        initData:this.more,

      }
    },
    computed: {},
    mounted: function () {
      this.init();
    },
    methods: {
      init(){
        var that=this;
        that.$api.car.getLable().then(res => {
          var res = res.data;
          res.data.find(res => {
            that.labArr.find(id => {
              if (id == res.id) {
                res.check = true;
              }else{
                res.check = false;
              }
            });
            that.labList.push(res);
            //
          });
          let id = this.$route.query.id;
          that.$api.member.getBook(id).then(res => {
            if(res.data.status === 1){
              let data  = res.data.data[0];

              that.typeVal = data.car_level ? data.car_level:"";
              that.card_come = data.car_address ? data.car_address:0;
              that.year_old = data.year_old ? data.year_old:0;
              that.go_long = data.mileage ? data.mileage:0;
              that.row_amount = data.row_amount ? data.row_amount:0;
              that.car_dis = data.car_dis ? data.car_dis:0;
              that.color = data.car_color ? data.car_color:"";
              that.car_case = data.car_case ? data.car_case:0;
              that.seat_numb = data.seat_numb ? data.seat_numb:0;
              that.oil_type = data.oil_type ? data.oil_type:"";
              that.car_country = data.car_country ? data.car_country:"";
              let addConfig = JSON.parse(data.other);
              if(addConfig){
                for(let n in that.labList){
                  if (addConfig.indexOf(String(that.labList[n].id)) != -1){
                    that.labList[n].check = true;
                  }
                }
              }
              this.$forceUpdate();

            } else {
              Dialog.alert({
                message: "未找到数据"
              }).then(() => {
                //this.car_show=0;
              });
            }

          })
        });


      },

      edit() {
        let data={};

        if(this.typeVal!=""){
          data.typeVal=this.typeVal;
        }
        if(this.card_come!=-1){
          data.card_come=this.card_come;
        }
        if(this.year_old!=0){
          data.year_old=this.year_old;
        }
        if(this.go_long!=0){
          data.go_long=this.go_long;
        }
        if(this.row_amount!=0){
          data.row_amount=this.row_amount;
        }
        if(this.car_dis!=0){
          data.car_dis=this.car_dis;
        }
        if(this.color!=""){
          data.color=this.color;
        }
        if(this.car_case!=-1){
          data.car_case=this.car_case;
        }
        if(this.seat_numb!=0){
          data.seat_numb=this.seat_numb;
        }
        if(this.oil_type!=""){
          data.oil_type=this.oil_type;
        }
        if(this.car_country!=""){
          data.car_country=this.car_country;
        }
        if(this.labArr.length!=0){
          data.labArr=this.labArr;
        }

        //API请求
        data.id = this.$route.query.id;
        this.$api.member.editBook({data:data}).then(res=>{
          if(res.data.status == 1){
            //成功
            Dialog.alert({
              message: res.data.msg
            }).then(() => {
              //this.car_show=0;
              this.$router.replace({
                path: '/user_book',
              });
            });
          } else {
            //失败
          }
        })
      },
      //返回user_book
      cancel(){
        console.log("cancel");
        this.$router.replace({
          path: '/user_book',
        });
      },

      //选择加装配置
      chooseLabel(id, item) {
        if (!item.check) {
          item.check = true;
          this.labArr.push(id);
        } else {
          item.check = false;
          var arr = [];
          this.labArr.find(res => {
            if (res != id) {
              arr.push(res);
            }
          });
          this.labArr = arr;
          console.log(this.labList)
        }

        this.$forceUpdate();
      },

      //排量
      changeRow(v){
        this.row_amount=v.toFixed(1);
      },

    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/index.scss";
  @import "../../assets/scss/user.scss";
</style>
